<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="stylesheet" href="./index.css" />
    <script src="../js/jquery.js"></script>
  </head>
  <body>
    <div class="main">
      <!-- 第一个 -->
      <div class="main-item">
        <div
          class="item-title eclips"
          title="原材频道"
        >
          原材频道
        </div>
        <div class="item-box">
          <ul class="item-nav">
            <li data-item="1" class="nav-item active">行情</li>
            <li data-item="2" class="nav-item">资讯</li>
            <li data-item="3" class="nav-item">指数</li>
            <li data-item="4" class="nav-item">指导</li>
          </ul>

          <div data-item="1" class="box-content">1</div>
          <div data-item="2" class="box-content hide">2</div>
          <div data-item="3" class="box-content hide">3</div>
          <div data-item="4" class="box-content hide">4</div>
        </div>
      </div>

      <!-- 第二个 -->
      <div class="main-item">
        <div class="item-title eclips" title="">护栏频道</div>
        <div class="item-box">
          <ul class="item-nav">
            <li data-item="1" class="nav-item active">行情</li>
            <li data-item="2" class="nav-item">资讯</li>
            <li data-item="3" class="nav-item">指数</li>
            <li data-item="4" class="nav-item">指导</li>
          </ul>

          <div data-item="1" class="box-content">1</div>
          <div data-item="2" class="box-content hide">2</div>
          <div data-item="3" class="box-content hide">3</div>
          <div data-item="4" class="box-content hide">4</div>
        </div>
      </div>

      <!-- 第三个 -->
      <div class="main-item">
        <div class="item-title eclips" title="">管材频道</div>
        <div class="item-box">
          <ul class="item-nav">
            <li data-item="1" class="nav-item active">行情</li>
            <li data-item="2" class="nav-item">资讯</li>
            <li data-item="3" class="nav-item">指数</li>
            <li data-item="4" class="nav-item">指导</li>
          </ul>

          <div data-item="1" class="box-content">1</div>
          <div data-item="2" class="box-content hide">2</div>
          <div data-item="3" class="box-content hide">3</div>
          <div data-item="4" class="box-content hide">4</div>
        </div>
      </div>

      <!-- 第四个 -->
      <div class="main-item">
        <div class="item-title eclips" title="第四个">配件频道</div>
        <div class="item-box">
          <ul class="item-nav">
            <li data-item="1" class="nav-item active">行情</li>
            <li data-item="2" class="nav-item">资讯</li>
            <li data-item="3" class="nav-item">指数</li>
            <li data-item="4" class="nav-item">指导</li>
          </ul>

          <div data-item="1" class="box-content">1</div>
          <div data-item="2" class="box-content hide">2</div>
          <div data-item="3" class="box-content hide">3</div>
          <div data-item="4" class="box-content hide">4</div>
        </div>
      </div>
    </div>
  </body>

  <script>
    const pageData = {};

    $(".item-box").on("click", ".nav-item", function () {
      $(this).addClass("active");
      $(this).siblings("li").removeClass("active");

      const dataItem = $(this).data("item");
      console.log("🚀 ~ file: index.html ~ line 46 ~ dataItem", dataItem);
      const corrContent = $(this)
        .parents(".item-box")
        .find('.box-content[data-item="' + dataItem + '"]');
      console.log("🚀 ~ file: index.html ~ line 48 ~ corrContent", corrContent);

      corrContent.removeClass("hide");
      corrContent.siblings(".box-content").addClass("hide");
    });
  </script>
</html>
